<template>
  <div>

    <el-row>
      <el-col :span="12">
        <h3>一、消息提醒</h3>
        <div>
          <h4>1.1、基本使用</h4>
          <template>
            <el-button :plain="true" @click="open2">成功</el-button>
            <el-button :plain="true" @click="open3">警告</el-button>
            <el-button :plain="true" @click="open1">消息</el-button>
            <el-button :plain="true" @click="open4">错误</el-button>
          </template>

        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、标签</h3>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
            <el-tab-pane label="用户管理" name="first">

              adfadsfafafadf
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second">
              <span slot="label"><i class="el-icon-date"></i> 我的行程</span>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
          </el-tabs>
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {

      activeName: 'third',


    }
  },
  methods: {

    open1 () {
      this.$message('这是一条消息提示');
    },
    open2 () {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },

    open3 () {
      this.$message({
        message: '警q42q432432423432',
        type: 'warning'
      });
    },

    open4 () {
      this.$message.error('错了哦，这是一条错误')
    },

    handleClick () {
      console.log(23232323)
    }

  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>